<template>
  <div class="home">
    <button @click="$router.push('/sug')">搜索建议</button>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="logo in loopLogo" :key="logo.id">
        <img :src="logo.logo" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="hot">
      <p v-for="hot in hotModel" :key="hot.id">{{ hot.title }}</p>
    </div>
    <div class="hot">
      <div v-for="floor in floors" :key="floor.id">
        <h3>{{ floor.name }}</h3>
        <p v-for="pro in floor.products" :key="pro.id">{{ pro.title }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { IHomeData } from "@/types/types";

export default Vue.extend({
  name: "HomeView",
  data() {
    return {
      show: true,
      floors: [] as IHomeData[],
      hotModel: [] as IHomeData[],
      loopLogo: [] as IHomeData[], // 默认ts会将[]推断为never[]类型，组件模板中使用的时候，会报错。使用as断言，强制设置为某个类型。
    };
  },
  async created() {
    let {
      data: { floors, hotModel, loopLogo },
    } = await this.$request(
      "https://m.edianyun.com/product/queryIndexContent?isnToLoginPage=true",
      "GET"
    );
    this.floors = floors;
    this.hotModel = hotModel;
    this.loopLogo = loopLogo;
  },
});
</script>

<style lang="less" scoped>
.my-swipe {
  height: 200px;
  img {
    width: 100%;
  }
}
</style>
